<template>
  <div class="app-container">
    <YxhyTableQuery
      ref="yxhyTableQueryRef"
      :query-params.sync="queryParams"
      :query-columns="queryColumns"
      @search="handleQuery"
    >
      <el-form-item slot="clearButton">
        <el-button type="info" icon="el-icon-delete" plain @click="handleClear" />
      </el-form-item>
    </YxhyTableQuery>

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading" />

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

  </div>
</template>

<script>
import {BAN_USER, CANCEL_VIP, columnsStatic, ORDER_TYPE, REFUND_TYPE} from './Ds.js'
import { queryOrderRefundList } from '@/api/order/orderRefund'

export default {
  name: 'OrderDataCoinList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        refund_transaction_no_search: undefined,
        user_id_search: undefined,
        status_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入商户单号',
        type: 'input',
        param: 'refund_transaction_no_search'
      }, {
        label: '',
        placeholder: '请输入用户ID',
        type: 'input',
        param: 'user_id_search'
      }, {
        label: '',
        placeholder: '退款状态',
        type: 'select',
        param: 'status_search',
        selectOptions: [{ name: '退款中', value: 0 }, { name: '退款成功', value: 1 }, { name: '退款失败', value: 2 }] // 下拉框选项
      }],
      loading: false,
      // 表格列
      columns: columnsStatic

    }
  },
  async created() {
    await this.init()
  },
  methods: {
    // 表格数据源
    async init() {
      this.loading = true
      const res = await queryOrderRefundList({
        ...this.queryPage,
        ...this.queryParams
      })
      // 处理响应
      res.data.map(e => {
        const { type, cancel_vip, ban_user, reason } = e
        e.type_text = REFUND_TYPE[type]
        e.cancel_vip_text = CANCEL_VIP[cancel_vip]
        e.ban_user_text = BAN_USER[ban_user]
        e.reason = reason || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.$refs.yxhyTableQueryRef.onEmpty()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
